<template>
    <div class="content">
        <el-dialog :visible.sync="modifyProcess.dialogFormVisible" title="进程" size="tiny" :before-close="handleClose" > 
            <div v-loading="loading" class="process-main">
                <ul class="process-steps">
                  <li v-for="(item,index) in stepsList" :key="index" v-bind:class="{ active: item.sStatus == '20' }">
                    <div class="box">
                      <i v-if="item.sStatus == '20'">审</i>
                      <span class="p-left">
                        <p>{{item.sCreateTime}}</p>
                      </span>
                      <div class="d-right" :class="[{mt:item.sStatus =='1004' || item.sStatus =='1008' && item.sStatus == '20'},{mtTwo:item.sStatus !=='1004' && item.sStatus !=='1008' && item.sStatus !== '20'}]">
                        <p :class="{mr:item.sFlag == '1'}" v-if="item.sFlag == 1">初审通过</p>
                        <p :class="{mr:item.sFlag == '2'}" v-else-if="item.sFlag == 2">复核通过</p>
                        <!-- <p v-else>{{item.sReason}}</p> -->
                        <p v-else>{{fifter(item.sStatus)}}</p>
                        <p v-if="item.sCreator" :class="{mr:item.sStatus == '20'}">处理人：{{item.sCreator}}</p>
                        <P :class="{mr:item.sStatus == '20'}" v-if="item.sReason">
                          <span v-if="item.sFlag == 1">描述：初审通过</span>
                          <span v-else-if="item.sFlag == 2">描述：复核通过</span>
                          <span v-else class="fn-si"><span v-if="item.sStatus =='1003' || item.sStatus =='1005' || item.sStatus == '1007'">描述：</span><span v-if="item.sStatus =='1003' || item.sStatus =='1005' || item.sStatus == '1007'" :title="item.sReason">{{item.sReason}}</span></span>
                          <!-- <span v-else>原因：{{fifter(item.sReason)}}</span> -->
                        </P>
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="process-mr"></div>
                <footer class="process-footer">
                    <el-button @click="handleClose">关闭</el-button>
                </footer>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { process } from 'api/settlemain';
export default {
    name: 'process',
    props: {
        modifyProcess: {}
    },
    created() {
        this.seach();
    },
    data() {
        return {
            loading: false,
            stepsList: []
        };
    },
    methods: {
        handleClose() {
            this.modifyProcess.dialogFormVisible = false;
        },
        fifter(e) {
            switch (e) {
                case '20':
                    return '初审或复审成功';
                case '1000':
                    return '暂未处理转账';
                case '1001':
                    return '向银行发出转账申请';
                case '1002':
                    return '银行正在处理，请稍后查询';
                case '1003':
                    return '查询失败，请手动刷新查询';
                case '1004':
                    return '银行转账成功';
                case '1005':
                    return '转账失败，请处理';
                case '1006':
                    return '本笔交易需由【人工】转账';
                case '1007':
                    return '线下转账失败';
                case '1008':
                    return '线下转账成功';
                default:
                    break;
            }
        },
        seach() {
            this.loading = true;
            process(this.modifyProcess.pId)
        .then(data => {
            this.loading = false;
            this.stepsList = data.data.content.reverse();
        })
        .catch(Error => {
            this.loading = false;
        });
      // this.$emit("sortInfor", value);
      // this.modifyProcess.dialogFormVisible = false;
        }
    }
};
</script>
<style lang="scss">
@import "src/styles/mixin.scss";
@include scrollBar;
.mr{
  margin-left: 7px;
}
.fn-si {
  display: block;
  overflow: hidden;
  text-align: justify;
  word-break: break-all;
  height: 60px;
  span {
    font-size: 14px;
    float: left;
    width: 80%;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // white-space: nowrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
-webkit-line-clamp: 3;
    &:first-child {
      width: 20%;
    }
  }
}
.move{
  height: auto;
}
.process-steps {
  height: 350px;
  overflow-x: hidden;
  padding-top: 30px;
  .active {
    background: #ccc;
    .box {
      width: 30px;
      height: 30px;
    }
  }
  li {
    margin-left: 160px;
    list-style: none;
    width: 30px;
    height: 30px;
    position: relative;
    // background: #ccc;
    border-radius: 50%;
    margin-bottom: 75px;
    text-align: center;
    font-size: 14px;
    line-height: 30px;
    .box {
      position: absolute;
      width: 15px;
      height: 15px;
      background: #ccc;
      border-radius: 50%;
      margin: auto;
      left: -2px;
      right: 0;
      top: 0;
      bottom: 0;
      i {
        font-style: normal;
        color: #fff;
      }

      .p-left {
        position: absolute;
        width: 100px;
        right: 30px;
        top: -10px;
        p {
          line-height: 17px;
        }
      }
      .d-right {
        position: absolute;
        width: 235px;
        left: 45px;
        top: -13px;
        p {
          text-align: left;
          line-height: 20px;
        }
      }
      .mt{
        top: -2px;
      }
      .mtTwo{
        top: -22px;
      }
    }
    &::after {
      position: absolute;
      content: "";
      width: 1px;
      height: 91px;
      background: #ccc;
      top: 22px;
      left: 14px;
    }
    &:last-child {
      &::after {
        width: auto;
        height: auto;
        background: transparent;
        bottom: 0;
        left: 0;
      }
    }
    &:first-child {
      .box {
        background: #f44336;
      }
    }
  }
}
.process-mr {
  margin-bottom: 30px;
}
.process-footer {
  text-align: center;
}
</style>
